<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人力资源管理系统 - 注册</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#64748b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 引入公共CSS -->
  <link rel="stylesheet" href="css/common.css">

  <!-- 引入API -->
  <script src="js/api.js"></script>
  <script src="js/common.js"></script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .register-card {
        @apply bg-white rounded-xl shadow-lg p-8 max-w-md w-full mx-auto;
      }
      .input-field {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
      }
      .btn-register {
        @apply w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 rounded-lg transition-all duration-200 flex items-center justify-center gap-2;
      }
    }
  </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="register-card p-6 rounded-lg shadow-lg bg-white">
    <h2 class="text-2xl font-bold mb-6 text-center">注册</h2>
    <form id="registerForm" class="space-y-4">
        <div>
            <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
            <input type="text" id="username" name="username" class="input-field" required>
        </div>
        <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                    <i class="fa fa-envelope"></i>
                </span>
                <input type="email" id="email" name="email" class="input-field pl-10" placeholder="请输入邮箱">
            </div>
        </div>
        <div class="mb-4">
            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">电话</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                    <i class="fa fa-phone"></i>
                </span>
                <input type="tel" id="phone" name="phone" class="input-field pl-10" placeholder="请输入电话">
            </div>
        </div>
        <div>
            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
            <input type="password" id="password" name="password" class="input-field" required>
        </div>
        <div>
            <label for="confirmPassword" class="block text-sm font-medium text-gray-700">确认密码</label>
            <input type="password" id="confirmPassword" name="confirmPassword" class="input-field" required>
        </div>
        <button type="submit" id="registerBtn" class="btn-register w-full">注册</button>
    </form>
    <p class="mt-4 text-center text-sm text-gray-600">
        已有账号？<a href="login.html" class="text-blue-600 hover:text-blue-800">登录</a>
    </p>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 使用common.js中的checkAuthentication函数检查登录状态
      if (!checkAuthentication()) {
        return;
      }

      const registerForm = document.getElementById('registerForm');
      const registerBtn = document.getElementById('registerBtn');

      registerForm.addEventListener('submit', async (e) => {
          e.preventDefault();
          // 在表单提交事件处理函数中
          const username = document.getElementById('username').value;
          const password = document.getElementById('password').value;
          const email = document.getElementById('email').value;
          const phone = document.getElementById('phone').value;
          
          // 调用API
          api.register({ username, password, email, phone })
          const confirmPassword = document.getElementById('confirmPassword').value;
      
          // 验证密码是否一致
          if (password !== confirmPassword) {
              showToast('两次输入的密码不一致', 'error');
              return;
          }
      
          // 调用注册API
          try {
              showLoading();
              // 移除email参数
              const response = await api.register({ username, password });
              hideLoading();
              showToast('注册成功，请登录', 'success');
              // 跳转到登录页面
              setTimeout(() => {
                  window.location.href = 'login.html';
              }, 1500);
          } catch (error) {
              hideLoading();
              showToast(error.message || '注册失败', 'error');
          }
      });
    });
  </script>
</body>
</html>